<template>
  <div  class="login5Page">
    <!-- <div align="center"> -->
    <!-- 中间内容开始	 -->
    <div class="obpmBid">
      <div class="obpm-tou">
        <font class="obpm-Language">语言:</font>
        <select
          name="language"
          class="obpm-selectLang"
          v-model="language"
          @change="changeLanguage"
        >
          <option value="en">English</option>
          <option value="zh">简体中文</option>
          <option value="cn">繁體中文</option>
        </select>
      </div>
    </div>
    <div class="loginContent">
      <img src="../assets/images/bg.png" />
      <!-- <div class="loginLogo">
      <div>
        <img src="../assets/images/logo_tl.png" alt="Teemlink.com" />
      </div>
      <div class="login_right">
        <div class="logo">
          <div class="logo_left">myApps</div>
          <div class="logo_cent"></div>
          <div class="logo_right">OBPM</div>
        </div>
        <div class="logo_text">流&thinsp;程&thinsp;管&thinsp;理&thinsp;系&thinsp;统</div>
      </div>
    </div> -->
      <div class="loginmain">
        <div class="login_title">
          {{$t('admin_login')}}
        </div>
        <div class="obpm-logoIpt">
          <div
            v-bind:class="{
              'obpm-userInfoFist': true,
              'obpm-userInfoFist2': have,
            }"
          >
            <div>
              <input
                type="text"
                class="obpm-userInfo_input"
                :placeholder="$t('loginno')"
                v-model="username"
              />
            </div>
          </div>
          <div
            v-bind:class="{
              'obpm-userPwdFist': true,
              'obpm-userPwdFist2': have,
            }"
          >
            <div>
              <input
                onfocus="this.value='';"
                type="password"
                class="obpm-password_input"
                :placeholder="$t('password')"
                autocomplete="off"
                v-model="password"
                @keyup.enter="doLogin"
              />
            </div>
          </div>
          <div
            v-bind:class="{
              'obpm-proof': true,
              'obpm-userPwdFist2': have,
              hide: !have,
            }"
          >
            <div v-bind:class="{ 'obpm-proofCode': true, 'obpm-proof2': have }">
              <div>
                <input
                  onfocus="this.value='';"
                  type="text"
                  class="obpm-code_input"
                  :placeholder="$t('character')"
                  autocomplete="off"
                  v-model="checkcode"
                  @keyup.enter="doLogin"
                />
              </div>
            </div>
            <div class="obpm-proofImg">
              <img
                :src="checkcodeImg"
                align="absmiddle"
                @click="doLogin('changeImg')"
                id="checkCodeImg"
              />
            </div>
          </div>
          <!-- Show the Errors -->
          <div v-bind:class="{ 'obpm-errorMessage': true, hide: !have }">
            <div class="obpm-tipWord">
              <img class="obpm-tipImg" src="../assets/images/tip1.png" />
              <b>{{ $t('error') }}:</b><span>{{ errmsg }}<br /></span>
            </div>
          </div>
          <!-- <div id="tipsArea" class="obpm-tipsArea"></div> -->
          <div
            v-bind:class="{
              'obpm-loginIn': true,
              'obpm-loginIn2': have,
              'obpm-top': isShowTop,
            }"
            @click="doLogin"
          >
            <p>{{ $t('login') }}</p>
          </div>
        </div>
      </div>
      <div class="obpm-copy">
        <div class="obpm-img">
          <!-- <img src="../assets/images/logo_tl.png" alt="Teemlink.com" /> -->
          <img :src="logoConfig.logoPath" />
        </div>
        <div>{{logoConfig.time}}</div>
        <div>
          <!-- <a
            href="http://www.teemlink.com"
            target="_blank"
            title="广东天翎"
            class="copyrightA"
          >
            <b>Teemlink.com</b>
          </a> -->
          <span v-html="logoConfig.text"></span>
          {{logoConfig.detail}}
        </div>
      </div>
      <!-- <p id="copyright" class="obpm-copy">
        <img src="../assets/images/logo_tl.png" alt="Teemlink.com" />
        © 2009-2021.
        <a href="http://www.teemlink.com" target="_blank" title="广东天翎" class="copyrightA">
          <b>Teemlink.com</b>
        </a> 保留所有权利.
      </p> -->
    </div>
    <!-- 中间内容结束 -->
    <!-- </div> -->
  </div>
</template>

<script>
import { setCookie } from '../utils'
export default {
  data() {
    return {
      username: '',
      password: '',
      have: false,
      isShowTop: true,
      checkcode: '',
      errmsg: '',
      checkcodeImg: '',
      language: 'zh',
      
      logoConfig: { //图标数据
        time:'',
        detail:'',
        logoPath:'',
        text:'',
      }
    }
  },
  created(){
    let obpmLogoData = obpmLogoConfig
    this.logoConfig.text = obpmLogoData.TK_LINK
    this.logoConfig.time = obpmLogoData.TIME
    let detail = obpmLogoData.DETAIL
    if(detail && detail.indexOf("TK_") > -1) {
      this.logoConfig.detail = detail.replace(/TK_/, '')
    }else {
      this.logoConfig.detail = this.$t('reserved') 
    }
    debugger
    if(process.env.NODE_ENV == 'development') {
      this.logoConfig.logoPath = '/logo/img/logo_tl.png' 
    }else {
      this.logoConfig.logoPath = window.location.origin + managerContextPath + '/logo/img/logo_tl.png'
    }
  },
  methods: {
    doLogin(type = 'default') {
      let checkcode = ''
      if (type == 'changeImg') {
        checkcode = '1111'
      } else {
        checkcode = this.checkcode
      }
      let password
      password = this.processPassword(this.password)
      this.$api.login(this.username, password, checkcode, {
        onSucess: (response) => {
          // 保存多语言
          setCookie('domainLanguage', this.language, 1)
          if (response.data.code == '0') {
            this.$api.getCurrentUser({
              onSucess: response => {
                this.$store.commit("saveCurrentUser",response.data.data);
                if(response.data.data && response.data.data.isOpenSecurity){
                  //开关开启
                  if(response.data.data.departments && response.data.data.departments.length>0){
                    this.$router.push("/main");
                  }else if(response.data.data.type == "secret" || response.data.data.type =="examine") {
                    let searchdata = {
                      currpage: 1,
                      pagelines: 10,
                      data:{
                        name:"",
                        username:'',
                        fieldExtends: {}//扩展查询字段
                      }
                    }
                    this.$api.getDomains(searchdata,{
                      onSucess: response => {
                        let showLdapButton = response.data.data.showLdapButton;
                        let datas = response.data.data.datas
                        if(datas.length == 1) { //安全开关开启后，安全审计员和安全保密员，只有一个域租户时直接打开该域租户
                          this.$router.push({
                            name:"domain",
                            query: {
                              domainid: datas[0].id,
                              showLdapButton: showLdapButton,
                              name: datas[0].name,
                            }
                          })
                        }else {
                          this.$router.push("/main");
                        }
                      }
                    });
                  }else{
                    this.$router.push("/home");
                  }
                }else{
                  // 记录当前登陆是哪一个用户
                  sessionStorage.setItem('domainData', JSON.stringify({loginType: response.data.data.type}))
                  if(response.data.data.type == 'domain'){
                    this.$router.push("/main");
                    // 要隐藏可以选中主页
                    sessionStorage.setItem('onlyDomainUser', true)
                  }else{
                    this.$router.push("/home");
                  }
                }
              }
            });
          } else {
            if (
              response.data.checkcodeImg &&
              response.data.checkcodeImg != ''
            ) {
              this.checkcodeImg = response.data.checkcodeImg
              this.have = true
              this.isShowTop = false
            } else {
              this.have = false
              this.isShowTop = true
            }
            this.errmsg = response.data.msg
            if(!(type == 'changeImg')) {
              this.$message({
                showClose: true,
                message: response.data.msg,
                type: 'error',
              })
            }
          }
        },
      })
    },
    processPassword(pw) {
      let Base64 = require('js-base64').Base64
      var str = Base64.encode(pw)
      if (str.length > 2) {
        var lp = str.substr(0, 2)
        var rp = str.substr(2, str.length)
        pw = rp + lp
      }
      return pw
    },
    // 处理多语言
    changeLanguage() {
      this.$i18n.locale = this.language
    },
  },
}
</script>

<style lang="scss" scope>

</style>